<template>
	<div class="">
		<el-form :rules="rules" ref="form" :model="form" label-width="80px" class="logincontain">
			<h3 style="text-align: center;">登录系统</h3>
		  <el-form-item label="用户名" prop="username">
			<el-input type="text" v-model="form.username" placeholder="请输入用户名"></el-input>
		  </el-form-item>
		 <el-form-item label="密码" prop="password">
		 	<el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
		 </el-form-item>
		 <el-form-item label="验证码" prop="code">
		 	<el-input style="width: 180px;margin-right: 5px;" type="text" v-model="form.code" placeholder="请输入验证码"></el-input>
			<img :src="imgurl" @click="updateImg()" style="width: 128px;" />
		 </el-form-item>

		 <el-form-item>
			<el-button type="primary" @click="onSubmit(form)">登录</el-button>
			<el-button>取消</el-button>
		  </el-form-item>
		</el-form>
	</div>

</template>
<script>
  import loginApi from '../api/login.js'
  export default {
	// name:'Login',
    data() {
      return {
		// imgurl1:"",
		imgurl:'',	
        form: {
          username: '',
          password: '',
          code: '',		  
        },
		rules:{
		      username: [
		        { required: true, message: '请输入用户名', trigger: 'blur' },
		        // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
		      ],
			  password: [
			    { required: true, message: '请输入密码', trigger: 'blur' },
			    // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
			  ],
			  code: [
			    { required: true, message: '请输入验证码', trigger: 'blur' },
			    // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
			  ],
		},
      }
    },
	created () {
		let self = this
		// console.log(sessionStorage.getItem('token'))
		// console.log(process.env.BASE_API)
		this.updateImg()

	},
    methods: {
	  updateImg(){
		  let self = this
		  self.$data.imgurl = '/captcha_src?time='+new Date();
	  },
      onSubmit(form) {
		let self = this
		  
        this.$refs.form.validate((valid) => {
          if (valid) {

			var Params = {
				username: this.form.username,
				password: this.form.password,
				code: this.form.code,
			};
			loginApi.login(Params).then((res) => {
				let type = res.data.code == 1?'success':'error';
				// console.log(res)		
				this.$message({
				  message: res.data.msg,
				  type: type
				});
				if(type == 'success'){
					sessionStorage.setItem("userInfo", JSON.stringify(res.data.data));
					sessionStorage.setItem("token", res.data.data.token);
					// if(sessionStorage.getItem("token")){
						this.$router.push({ path: "/home" }).catch((error) => {})
					// }
					// this.$router.push({ path: "/home" });
					// this.$router.replace({ path: "/home" })
					// return
				}
				this.updateImg()
				
			}).catch((error) => {
				  //接口调用方法统一处理
				  // this.logining = false;
				this.updateImg()
			});		 
		
          } else {
			this.updateImg()
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
  }
</script>
<style>
	.logincontain{
		border-radius: 15px;
		background-clip: border-box;
		margin: 180px auto;
		width: 350px;
		padding: 15px 35px 15px 35px;
		background: #fff;
		border: 1px solid #eaeaea;
		box-shadow: 0 0 25px #cac6c6;
	}
	.el-form-item__content {
		display: flex;
		align-items: center;
	}
	
</style>